<template>
  <div class="app-container" ref="radioBoxRefs">
    <el-row class="info out-border">
      <el-col :span="3">
        <el-avatar class="avatar" :src="workerInfo && workerInfo.avatar"></el-avatar>
      </el-col>
      <el-col :span="6">
        <div class="item">姓名:{{ workerInfo && workerInfo.workerName }}</div>
        <div class="item">手机号:{{ workerInfo && workerInfo.userPhoneNumber }}</div>
        <div class="item">身份证:{{ workerInfo && workerInfo.identityCardNumber }}</div>
        <div class="item">银行卡号:{{ workerInfo && workerInfo.bankCardNumber }}</div>
      </el-col>
      <el-col :span="6">
        <div class="item">师傅id:{{ workerInfo && workerInfo.workerId }}</div>
        <div class="item">用户帐号id:{{ workerInfo && workerInfo.accountId }}</div>
        <div class="item">
          入驻渠道:{{
          workerInfo && workerInfo.onboardingSource | filterOnboardingSource
          }}
        </div>
      </el-col>
      <el-col :span="24" style="margin: 10px 0 0">
        对外展示:
        <Tags
          type="INTERNAL_LABEL"
          ref="INTERNAL_LABEL_Refs"
          :tags="
            workerInfo && workerInfo.internalLabel
              ? workerInfo.internalLabel.map((item) => item.labelName)
              : []
          "
      
        />
      </el-col>
      <el-col :span="24" style="margin: 10px 0">
        内部备注:
        <Tags
          type="EXTERNAL_LABEL"
          ref="EXTERNAL_LABEL_Refs"
          :tags="
            workerInfo && workerInfo.externalLabel
              ? workerInfo.externalLabel.map((item) => item.labelName)
              : []
          "
  
        />
      </el-col>
    </el-row>
    <el-radio-group class="radioGroup" size="small" v-model="activeStatus" @input="onChange">
      <el-radio-button label="category">服务类目</el-radio-button>
      <el-radio-button label="count">业务信息</el-radio-button>
      <el-radio-button label="storeHistory">服务信息</el-radio-button>
      <el-radio-button label="user">资料档案</el-radio-button>
    </el-radio-group>
    <el-descriptions
      v-if="workerInfo && workerInfo.category"
      id="category"
      title="服务类目"
      :column="1"
      class="out-border"
      size="mini"
    >
      <!-- <template slot="extra">
        <el-button type="warning" size="small" @click="onCatePriceDialog">修改信息</el-button>
      </template> -->
      <el-descriptions-item v-for="item in workerInfo.category" :key="item.categoryId">
        <template slot="label">
          <el-tag
            size="small"
            :type="item.workerCategoryState == 'YES' ? 'success' : 'danger'"
            style="margin-right: 10px"
          >{{ item.workerCategoryState | filterWorkerCategoryState }}</el-tag>

          {{ item.serviceCategoryFullName }}
        </template>
        <span style="font-size: 14px; line-height: 24px">{{ item.price | filterPriceFormat }}&nbsp;&nbsp;{{item.serviceUnit}}</span>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions id="count" title="业务信息" :column="1" class="out-border">
      <el-descriptions-item>
        <template slot="label">累计完成订单</template>
        {{ workerInfo && workerInfo.finishCount }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">近30天完成订单</template>
        {{ workerInfo && workerInfo.finishCountThirty }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">产生售后得订单</template>
        {{ workerInfo && workerInfo.saleCount }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      id="storeHistory"
      title="服务信息"
      :column="1"
      direction="vertical"
      class="out-border"
    >
      <el-descriptions-item>
        <template slot="label">是否有实体店</template>
        {{
        workerInfo &&
        workerInfo.storeHistory &&
        workerInfo.storeHistory.storesFlag | filterStoresFlag
        }}
      </el-descriptions-item>
      <el-descriptions-item v-if="workerInfo&&workerInfo.storeHistory.storesFlag ==='YES'">
        <template slot="label">门头照片</template>
        <div v-if="workerInfo && workerInfo.storeHistory">
          <el-image
            class="avatar"
            v-for="item in workerInfo.storeHistory.storesImageUrl.split(',')"
            :key="item"
            :src="item"
            :preview-src-list="
              workerInfo.storeHistory.storesImageUrl.split(',')
            "
          ></el-image>
        </div>
      </el-descriptions-item>
      <el-descriptions-item v-if="workerInfo&&workerInfo.storeHistory.storesFlag ==='YES'">
        <template slot="label">所在地址</template>
        {{
        workerInfo &&
        workerInfo.storeHistory &&
        workerInfo.storeHistory.address
        }}
        <Map
          v-if="workerInfo && workerInfo.storeHistory"
          :lng="workerInfo.storeHistory.addressLongitude"
          :lat="workerInfo.storeHistory.addressLatitude"
        />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">重点服务区域</template>
        <div
          v-for="item in workerInfo && workerInfo.importTant"
          :key="item.serviceAreaId"
        >{{ item.serviceAreaName }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">优先服务区域</template>
        <div>
          <div
            v-for="item in workerInfo && workerInfo.precedence"
            :key="item.serviceAreaId"
          >{{ item.serviceAreaName }}</div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">普通服务区域</template>
        <div
          v-if="
            workerInfo && workerInfo.ordinary && workerInfo.ordinary.length > 0
          "
        >
          <div
            v-for="item in workerInfo.ordinary"
            :key="item.serviceAreaId"
          >{{ item.serviceAreaName }}</div>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions id="user" title="资料档案" :column="1" direction="vertical" class="out-border">
      <el-descriptions-item>
        <template slot="label">身份证正反面照片</template>
        <el-image
          v-if="workerInfo && workerInfo.identityCardFront"
          class="avatar"
          :src="workerInfo.identityCardFront"
          :preview-src-list="[
            workerInfo.identityCardFront,
            workerInfo.identityCardBack,
          ]"
        ></el-image>
        <el-image
          v-if="workerInfo && workerInfo.identityCardBack"
          class="avatar"
          :src="workerInfo.identityCardBack"
          :preview-src-list="[
            workerInfo.identityCardFront,
            workerInfo.identityCardBack,
          ]"
        ></el-image>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">学习证明资料/相关经验证明资料</template>
        <div v-if="workerInfo && workerInfo.information">
          <el-image
            class="avatar"
            v-for="item in workerInfo.information.split(',')"
            :key="item"
            :src="item"
            :preview-src-list="workerInfo.information.split(',')"
          ></el-image>
        </div>
      </el-descriptions-item>
    </el-descriptions>

    <CatePrice ref="catePriceRefs" @update="handleUpdateCatePrice" />
    <StudyEdit ref="studyRefs" @update="handleUpdateStudy" />
    <StoreEdit ref="storeRefs" :workerId="workerId" />
  </div>
</template>

<script>
import {
  apiWorkerDetail,
  apiWorkerUpdateMobile,
  apiWorkerUpdateCategory,
  apiWorkerUpdateInformation,
  apiWorkerDeleteLabel,
  apiWorkerInsertLabel
} from "@/api/worker.js";
import Tags from "./components/tags.vue";
import Map from "@/components/Map/index.vue";
import CatePrice from "./components/catePrice.vue";
import StudyEdit from "./components/studyEdit.vue";
import StoreEdit from "./components/storeEdit.vue";
import { validatePhone } from "@/utils/validate";
export default {
  components: { Tags, Map, CatePrice, StudyEdit, StoreEdit },
  data() {
    return {
      activeStatus: "category",
      workerId: "",
      workerInfo: null
    };
  },
  mounted() {
    const { workerId } = this.$route.query;
    this.workerId = workerId;
    this.getData();
  },
  methods: {
    getData() {
      apiWorkerDetail({ workerId: this.workerId }).then(res => {
        if (res.code == "SUCCESS") {
          this.workerInfo = res.data;
        }
      });
    },
    // 新增标签
    handleTagCreate(option) {
      const { txt, type } = option;
      const params = {
        workerId: this.workerId,
        labelName: txt,
        labelType: type
      };
      apiWorkerInsertLabel(params).then(res => {
        this.$message({
          type: "success",
          message: "新增标签成功"
        });
        this.getData();
        this.$refs[`${type}_Refs`].reset();
      });
    },
    // 删除标签
    handleTagRemove(option) {
      const { txt, type } = option;
      const params = {
        workerId: this.workerId,
        labelName: txt,
        labelType: type
      };
      apiWorkerDeleteLabel(params).then(res => {
        this.$message({
          type: "success",
          message: "删除标签成功"
        });
        this.getData();
      });
    },
    // 修改店铺信息
    handleStoreEdit() {
      this.$refs.storeRefs.open();
    },
    // 修改学习资料弹窗
    onStudyEditDialog() {
      this.$refs.studyRefs.open();
    },
    // 确认更新资料
    handleUpdateStudy(values) {
      const params = {
        workerId: this.workerId,
        information: values.studyImage.join(",")
      };
      apiWorkerUpdateInformation(params).then(res => {
        this.$message({
          type: "success",
          message: "更新成功"
        });
        this.$refs.studyRefs.close();
        this.getData();
      });
    },
    // 修改师傅服务类目和报价弹窗
    onCatePriceDialog() {
      this.$refs.catePriceRefs.open(this.workerInfo.category);
    },
    // 确认更新服务报价
    handleUpdateCatePrice(domains) {
      const params = domains.map((item) => {
        return {
          categoryId: item.categoryId,
          workerCategoryState: item.check ? "YES" : "NO",
          workerId: this.workerId,
          price: item.price * 100,
        };
      });
      apiWorkerUpdateCategory(params).then(res => {
        this.$message({
          type: "success",
          message: "更新成功"
        });
        this.$refs.catePriceRefs.close();
        this.getData();
      });
    },
    // 改绑银行号
    handleEditBank() {
      this.$prompt("", "请输入新银行卡号", {
        confirmButtonText: "发起改绑",
        cancelButtonText: "取消",
        inputValidator: value => {
          if (!value) {
            return "银行卡号不能为空!";
          } else if (value.length > 20) {
            return "银行卡号格式错误!";
          } else {
            return true;
          }
        }
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "修改成功"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    // 改绑手机号
    handleEditMobile() {
      this.$prompt("", "请输入新手机号", {
        confirmButtonText: "发起改绑",
        cancelButtonText: "取消",
        inputType: "number",
        inputValidator: value => {
          console.log(value);
          const phoneReg = /^[1][3-9][0-9]{9}$/;
          if (!value) {
            return "手机号码不能为空!!";
          } else {
            if (!phoneReg.test(value)) {
              return "手机号码格式错误";
            } else {
              return true;
            }
          }
        }
      })
        .then(({ value }) => {
          apiWorkerUpdateMobile({
            userPhoneNumber: value,
            workerId: this.workerId
          }).then(res => {
            this.$message({
              type: "success",
              message: "改绑成功"
            });
            this.getData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    // 查看徒弟
    onViewStudent(row) {
      this.$router.push({
        path: "/worker/personDetail",
        query: { workerId: row.studentId, t: new Date() }
      });
    },
    onChange(e) {
      const dom = document.getElementById(e);
      const offsetTop = dom.offsetTop;
      this.$refs.radioBoxRefs.scrollTop = offsetTop - 40;
    }
  }
};
</script>
<style scoped lang="scss">
.app-container {
  font-size: 14px;
  .item {
    margin-bottom: 5px;
  }
  .info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .out-border {
    margin: 10px 0;
  }
  ::v-deep .avatar {
    width: 120px;
    height: 120px;
    margin: 0 10px 10px 0;
  }
  ::v-deep .el-descriptions-item__label {
    font-weight: bold !important;
  }
  ::v-deep .el-descriptions-item__content {
    padding-left: 10px;
  }

  .radioGroup {
    position: sticky;
    top: -20px;
    background-color: #fff;
    z-index: 10;
  }
}
</style>
